<template>
	<view class="page" :style="{minHeight:windowHeight+'px',background:'url('+join.image.file_path+') 0 0/100% 100%'}">
		<view class="head">
			<image src="../../../static/whiBg.png" @click="gotoPage('/pages/user/index/index')"></image>
			<view>加入我们</view>
			<view></view>
		</view>
		<view class="item">
			<view class="post">
				招聘岗位
			</view>
			<view class="driver" v-html="join.article_content">
				
			</view>
			<!-- <view class="driver">
				<view>驾驶员</view>
				<ul class="driverRequire">
					<li>3-5年驾驶经验;</li>
					<li>有驾驶证</li>
					<li>无重大交通安全事故;</li>
					<li>身体健康,无心脏病等突发疾病;</li>
				</ul>
			</view> -->
		</view>
		<view class="joinBg2">
			<image src="../../../static/joinBg2.png"></image>
		</view>
		<view class="joinBg3">
			<image src="../../../static/joinBg3.png"></image>
		</view>
		<view class="goto" @click="gotoPage('/pages/recruitment/recruitment')">
			去求职
		</view>

		<!-- 没有记录 -->
		<!-- <view class="nullmsg d-c-c p30" v-if="join.length == 0">
			<text class="iconfont icon-wushuju"></text>
			<text class="cont">亲，暂无相关记录哦</text>
		</view> -->
		<!-- <uni-load-more class="not" v-else :loadingType="loadingType"></uni-load-more> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				join: '',
				loadding: false,
				windowHeight: '',

			};
		},
		computed: {
			/*加载中状态*/
			loadingType() {
				if (this.loadding) {
					return 1;
				} else {
					if (this.join.length != 0) {
						return 2;
					} else {
						return 0;
					}
				}
			}
		},
		onLoad() {
			this.getData();
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight
				}
			})
		},
		onPullDownRefresh() {
			this.getData();
			setTimeout( () => {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			/*跳转页面*/
			gotoPage(path) {
				let self = this;
				if (path.startsWith('/')) {
					uni.navigateTo({
						url: path
					});
				} else {
					self[path]();
				}
			},
			/*获取数据*/
			getData() {
				let self = this;
				uni.showLoading({
					title: '加载中'
				});
				self._get('plus.article.article/detail', 
				{
					article_id:10014
				},
				 function(res) {

					self.join = res.data.detail;
					console.log(self.join.image.file_path)
					self.loadding = false;
					uni.hideLoading();
				});
			},
		},
	}
</script>

<style lang="scss">
	.page {
		width: 100%;
		height: 100%;
		//background: url(../../../static/joinBg.png) 0 0/100% 100%;
		overflow: hidden;
		position: relative;
		top: 0;
	}

	.head {
		padding: 0 36rpx;
		margin-top: 80rpx;
		display: flex;
		color: #FFFFFF;
		font-size: 30rpx;
		align-items: center;
		justify-content: space-between;
	}

	.head image {
		width: 23rpx;
		height: 33rpx;
	}

	.item {
		width: 86%;
		height: 700rpx;
		background-color: #FFFFFF;
		//margin: 0 auto;
		position: absolute;
		top: 420rpx;
		left: 7%;
		border-radius: 30rpx;
		overflow: hidden;
	}

	.post,.driver{
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		padding-left: 40rpx;
		//margin-left: 40rpx;
		background-color: rgba(240, 241, 254, 1);
		font-size: 28rpx;
		font-weight: 800;
	}
	.driver{
		margin-top: 30rpx;
		background-color: #FFFFFF;
		line-height: 32rpx;
	}
	.driverRequire {
		margin-top: 30rpx;
		list-style: none;
		color: rgba(87, 91, 100, 1);
		margin-left: -70rpx;
		font-weight: 500;
	}

	.driverRequire li:before {
		content: "";
		display: inline-block;
		width: 6rpx;
		height: 6rpx;
		background-color:  rgba(87, 91, 100, 1);
		border-radius: 50%;
		margin-right: 8rpx;
		margin-bottom: 6rpx;
	}
	.goto{
		width: 86%;
		height: 80rpx;
		background-color: rgba(88, 100, 253, 1);
		color: #FFFFFF;
		text-align: center;
		line-height: 80rpx;
		position: absolute;
		bottom: 60rpx;
		left: 7%;
		border-radius: 8rpx;
	}
	.joinBg2{
		width: 84rpx;
		height: 100rpx;
		position: absolute;
		left: 0;
		top: 620rpx;
	}
	.joinBg3{
		width: 170rpx;
		height: 320rpx;
		position: absolute;
		right: 0;
		top: 780rpx;
	}
</style>
